<!-- @format -->

<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
  <div class="flex home-top-chart m-t-2">
    <div class="bg-white flex-0 pie-cart-box flex m-r-2">
      <HomeTitle :title="`卸车统计（${homeTimeText}）`" />
      <div class="pie-cart">
        <ringChart />
      </div>
    </div>

    <div class="bg-white">
      <!-- <HomeTitle title="近30天趋势图">
				<div class="line-chart-title">
					<span> 到货预报 </span>
					<span> 提货单 </span>
				</div>
			</HomeTitle> -->
      <HomeTitle title="近7天趋势图">
        <div class="line-chart-title">
          <span> 到货预报 </span>
          <span> 提货单 </span>
        </div>
      </HomeTitle>
      <div class="line-cart">
        <ma-chart height="330px" :option="loginChartOptions" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { nextTick, onMounted, ref, inject } from "vue";
import { graphic } from "echarts";
import ringChart from "./ring-chart.vue";
import HomeTitle from "./home-title.vue";
import { getOpDataBy10Days } from "@/api/home/index.js";

const homeTimeText = inject("homeTimeText");

function graphicFactory(side) {
  return {
    type: "text",
    bottom: "8",
    ...side,
    style: {
      text: "",
      textAlign: "center",
      fill: "#4E5969",
      fontSize: 12
    }
  };
}

const graphicElements = ref([
  graphicFactory({ left: "2.6%" }),
  graphicFactory({ right: 0 })
]);

const loginChartOptions = ref({});

onMounted(() => {
  getOpDataBy10Days({ day: 7 }).then((res) => {
    console.log("数据结构", res);
    let xAxis = [],
      arrival = [],
      pickArr = [];
    res.data.forEach((item) => {
      xAxis.unshift(item.time.substr(5, 5));
      arrival.unshift(Math.round(item.yubao_num * 1000) / 1000);
      pickArr.unshift(Math.round(item.tihuo_num * 1000) / 1000);
    });
    loginChartOptions.value = {
      grid: {
        left: "5%",
        right: "0",
        top: "10",
        bottom: "30"
      },
      xAxis: {
        type: "category",
        offset: 2,
        data: xAxis,
        boundaryGap: false,
        axisLabel: {
          color: "#4E5969"
          //   formatter(value, idx) {
          //     if (idx === 0) return "";
          //     if (idx === xAxis.length - 1) return "";
          //     return `${value}`;
          //   }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          interval: (idx) => {
            if (idx === 0) return false;
            if (idx === xAxis.length - 1) return false;
            return true;
          },
          lineStyle: {
            color: "#E5E8EF"
          }
        },
        axisPointer: {
          show: true,
          lineStyle: {
            color: "#23ADFF",
            width: 2
          }
        }
      },
      yAxis: {
        type: "value",
        axisLine: {
          show: false
        },
        axisLabel: {
          formatter(value, idx) {
            if (idx === 0) return value;
            return `${value}`;
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#E5E8EF"
          }
        }
      },
      tooltip: {
        trigger: "axis",
        formatter(params) {
          return `<div class="login-chart">
							<p class="tooltip-title">${params[0].axisValueLabel}</p>
							<div class="content-panel">
							<span>到货：</span><span class="tooltip-value">${Number(
                params[0].value
              ).toLocaleString()}吨</span></div>
							<div class="content-panel">
							<span>提货：</span><span class="tooltip-value">${Number(
                params[1].value
              ).toLocaleString()}吨</span></div>
							</div>`;
        }
      },
      graphic: {
        elements: graphicElements.value
      },
      series: [
        {
          data: arrival,
          type: "line",
          smooth: true,
          symbolSize: 8,
          lineStyle: {
            width: 3,
            color: new graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "#00A0E9"
              },
              {
                offset: 0.5,
                color: "#00A0E9"
              },
              {
                offset: 1,
                color: "#00A0E9"
              }
            ])
          },
          showSymbol: true,
          areaStyle: {
            opacity: 0.8,
            color: new graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(0, 160, 233, 0.65)"
              },
              {
                offset: 1,
                color: "rgba(0, 160, 233, 0)"
              }
            ])
          }
        },
        {
          data: pickArr,
          type: "line",
          smooth: true,
          symbolSize: 8,
          lineStyle: {
            width: 3,
            color: new graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "#00AB84"
              },
              {
                offset: 0.5,
                color: "#00AB84"
              },
              {
                offset: 1,
                color: "#00AB84"
              }
            ])
          },
          showSymbol: true,
          areaStyle: {
            opacity: 0.8,
            color: new graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(0, 171, 132, 0.65)"
              },
              {
                offset: 1,
                color: "rgba(0, 171, 132, 0)"
              }
            ])
          }
        }
      ]
    };
  });
});
</script>

<style lang="less" scoped>
.home-top-chart {
  width: 100%;
  height: 415px;

  > div {
    border-radius: 9px;
    flex: 1 1 auto;
  }

  .line-cart {
    padding: 0 15px;
    margin-top: 30px;
  }

  .pie-cart-box {
    width: 35%;
    flex-direction: column;
    flex: 0 0 auto;

    .HomeTitle {
      flex: 0 0 auto;
    }

    .pie-cart {
      margin-top: 12px;
      flex: 1 1 auto;
    }
  }

  .line-chart-title {
    margin-left: auto;
    margin-right: 26px;
    font-weight: 400;
    font-size: 12px;

    span {
      padding-left: 30px;
      color: #415b73;
      position: relative;

      &::after,
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }

      &::after {
        height: 0;
        width: 22px;
        border: 2px solid #00a0e9;
        border-radius: 2px;
      }

      &::before {
        width: 12px;
        height: 12px;
        border: 2px solid #00a0e9;
        border-radius: 50%;
        background: #fff;
        z-index: 2;
        transform: translate(40%, -50%);
      }

      &:nth-of-type(2) {
        margin-left: 14px;

        &::after,
        &::before {
          border-color: #00ab84;
        }
      }
    }
  }

  .m-r-2 {
    margin-right: 20px;
  }
}
</style>
